<template>
    <div class="container-grid bv">
        <zb-header-search
            ref="searchHeader"
            :valueTransform="enquiryData.valueTransform"
            :rule="enquiryData.inputs"
            :btns="enquiryData.btns"
            :btnsData="permissionsData"
            :searchBtn="enquiryData.searchBtn"
            @search="onQueryClick"
        ></zb-header-search>
        <div class="b1">
            <vxe-grid
                ref="xTable"
                v-bind="gridConfig"
                :data="tableList.data"
                :columns="tableList.column"
                :rowClassName="tableList.formatRowClass"
            >
                <template v-slot:operation="{ row }">
                    <zb-btn-group
                        :btns="tableList.btns"
                        :data="{ row, permissionsData }"
                    ></zb-btn-group>
                </template>
            </vxe-grid>
        </div>
        <div class="pagination-el bh bend">
            <el-pagination
                @size-change="onSizeChange"
                @current-change="onCurrentChange"
                :current-page="tableList.pagination.curr"
                :page-sizes="gridConfig.pageSizes"
                :page-size="tableList.pagination.limit"
                :total="tableList.pagination.total"
                layout="total, sizes, prev, pager, next, jumper"
            ></el-pagination>
        </div>
        <dialogForm
            ref="dialogForm"
            @submitSuccess="onSubmitSuccess"
            @closeDialog="onCloseDialog"
        ></dialogForm>
    </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Action, Getter } from "vuex-class";
import { mixinColumnGrid } from "@/mixin/ColumnGrid";
import { mixinAccess } from "@/mixin/Access";
import { mixinDialogFormParent } from "@/mixin/dialog/FormParent";
import dialogForm from "./Edit.vue";
import { isLettersNumbers } from "@/utils/valid";
@Component({
    name: "RentUserGrid",
    mixins: [mixinColumnGrid, mixinAccess, mixinDialogFormParent],
    components: {
        dialogForm
    }
})
export default class RentUserGrid extends Vue {
    @Action("rentUser/list") gridList: any;
    @Action("rentUser/del") delItem: any;

    @Getter("sharing/rentUserType") typeData: any;

    headerSelectList: any = [
        {
            dataName: "typeData",
            keyName: "tenant_type"
        }
    ];
    // 查询头配置
    enquiryData: any = {
        searchBtn: {
            condition: ["query"]
        },
        btns: [
            {
                label: "新增",
                class: "btn-blue",
                condition: ["add"],
                handleClick: (this as any).onAddClick
            }
        ],
        inputs: [
            {
                type: "input",
                field: "tenant_name",
                title: "租户名称"
            },
            { type: "select", field: "tenant_type", title: "租户类别" },
            {
                type: "input",
                field: "certificate_num",
                title: "证件号码",
                validate: [
                    {
                        validator: isLettersNumbers
                    }
                ]
            }
        ]
    };

    transformList: any = [
        {
            dataName: "typeData",
            keyName: "tenant_type"
        }
    ];
    // 列表配置
    tableList: any = {
        column: [
            {
                title: "租户sn",
                field: "tenant_sn",
                minWidth: 150
            },
            {
                title: "租户类型",
                field: "tenant_type_label",
                minWidth: 100
            },
            {
                title: "租户名称",
                field: "tenant_name",
                minWidth: 100
            },
            {
                title: "证件号码",
                field: "certificate_num",
                minWidth: 150
            },
            {
                title: "联系人",
                field: "contact_name",
                minWidth: 90
            },
            {
                title: "联系电话",
                field: "contact_tel",
                minWidth: 110
            },
            {
                title: "租约编号",
                field: "lease_no",
                minWidth: 150
            },
            {
                showOverflow: "ellipsis",
                fixed: "right",
                title: "操作",
                slots: {
                    default: "operation"
                },
                headerAlign: "center",
                align: "left",
                width: 120
            }
        ],
        btns: [
            {
                label: "修改",
                condition: ["permissionsData.edit"],
                handleClick: (this as any).onEditClick
            },
            {
                label: "删除",
                condition: ["permissionsData.del"],
                handleClick: this.onDelClick
            }
        ],
        proxy: {
            requestFun: (this as any).gridList,
            disposeItem: (this as any).disposeItem
        }
    };

    onDelClick({ row }: any) {
        const me = this as any;
        me.delList(row.tenant_sn, "该租户");
    }
}
</script>
